<!-- 买家售后详情 -->
<template>
  <PublicPage pageName="售后详情" :borderType="true" :showNav="true">
    <view class="myAftersaleDetails">
      <!-- 头部+步骤条 start-->
      <view class="bgf u-m-b-20">
        <!-- 5.售后完成 6.驳回 7.撤销申请：显示文字 -->
        <view v-if="orderAfterSalesItem.status === 5 || orderAfterSalesItem.status === 6 || orderAfterSalesItem.status === 7">
          <view class="tc fz-24" style="line-height: 200rpx;">
            <text v-if="orderAfterSalesItem.status === 5">售后已完成</text>
            <text class="themeFontColor" v-if="orderAfterSalesItem.status === 6">申请被拒绝</text>
            <text v-if="orderAfterSalesItem.status === 7">已撤销申请</text>
          </view>
        </view>
        <!-- 其他显示进度条  -->
        <view v-else style="padding:54rpx 0rpx;">
          <u-steps :list="numList" :current="current" mode="number" active-color="#E44435" un-active-color="#DCDEE0"></u-steps>
        </view>
      </view>
      <!-- 头部+步骤条 end-->
      <view class="bgf" style="height: calc(100% - 320rpx);">
        <view class="justify-between px32 linh-48" style="box-shadow: inset 0px -1px 0px #EEEEEE;">
          <view>售后进度明细</view> 
          <view class="viceColor">{{orderAfterSalesItem.applyType === 1 ? '仅退款' : '退货退款 '}}</view>
        </view>
        <!-- 日志 -->
        <scroll-view scroll-y style="height: calc(100% - 96rpx);">
          <AfterSalesProgress :afterSales="orderAfterSalesItem" />
        </scroll-view>
      </view>
  
      <!-- 底部固定按钮 -->
      <view class="bottomBtn">
        <button class="btn" v-if="orderAfterSalesItem.groupAccountId" @click.stop="connection(orderAfterSalesItem.groupAccountId)">联系团长</button>
        <!-- 待团长通过前都可以撤销 -->
        <button class="btn" v-if="orderAfterSalesItem.status <= 3" @click="_withdraw">撤销申请</button>
        <!--  -->
        <button class="btn" v-if="orderAfterSalesItem.status === 3 && !orderAfterSalesItem.orderShipVO" @click="_goLogisticsPage(1)">填写物流单号</button>
        <button class="btn" v-if="orderAfterSalesItem.status === 3 && orderAfterSalesItem.orderShipVO" @click="_goLogisticsPage(2)">修改物流单号</button> 
      </view>
    </view>
  </PublicPage>
</template>
<script>
import PublicPage from "@/components/publicPage/index.vue";
import HeadNav from "@/components/headNav/index.vue";
import AfterSalesProgress from "./afterSalesProgress.vue";
import orderApi from "@/api/orderApi.js";

export default {
  components: {
    HeadNav,
    PublicPage,
    AfterSalesProgress
  },
  computed: {
    // 进度条显示进度
    numList(){
      let list = []
      if(this.orderAfterSalesItem.applyType === 1){ //申请类型1退款不退货2退货退款
        list = [
          {name: '提交申请'},
          {name: '待团长处理'}, 
          {name: '售后完成'},
        ]
      }else{
         list = [
          {name: '提交申请'},
          {name: this.orderAfterSalesItem.status >=4 ? '已同意售后' : '待团长处理'},
          {name: '退货退款'}, 
          {name: '售后完成'},
        ] 
      }
      return list
    },
    // 当前进度条下标
    // 买家售后状态(1.提交申请 2.待通过 3.寄回商品 4.退货已寄回待供货团长同意退款 5.售后完成 6.驳回 7.撤销申请)
    current(){
      if(this.orderAfterSalesItem.applyType === 2 && this.orderAfterSalesItem.status === 4){
        return 2
      }else{
        return this.orderAfterSalesItem.status - 1
      }
    }
  },
  onLoad(options){
    this.orderAfterSalesId = options.orderAfterSalesId
  },
  onShow(){
    this._getMyGetAfterDetails()
  },
  data() {
    return {
      orderAfterSalesId: '', // 售后ID
      orderAfterSalesItem: {}, // 售后对象
    }
  },
  methods:{
    // 买家获取售后详情
    _getMyGetAfterDetails(){
      orderApi.myGetAfterDetails({orderAfterSalesId: this.orderAfterSalesId}).then(res=>{
        this.orderAfterSalesItem = res.data
      })
    },
    // 撤销申请
    _withdraw(){
      const that = this
      uni.showModal({
        title: '确认撤销售后申请？',
        content: '确认撤销后，售后申请将会撤销，可再次发起',
        confirmColor: '#E44435',
        confirmText: '确定',
        cancelColor: '#969799',
        cancelText: '取消',
        success: ({ confirm, cancel }) => {
          if(confirm){
            orderApi.revocationOrderAfterSales({orderAfterSalesId: this.orderAfterSalesId}).then(()=>{
              that._getMyGetAfterDetails()
              uni.showToast({
                title: '取消成功',
                icon: 'none'
              })
            })
          }
        }
      })
      
    },
    // 填写或者修改物流单号
     //  type:1 新增发货地址 2修改发货地址
    _goLogisticsPage(type){
      uni.navigateTo({url: `/pagesA/order/editLogistics?types=${type}&orderAfterSalesId=${this.orderAfterSalesId}&source=aftersale`});
    },
    // 联系团长
    connection(groupAccountId){
      if(this.$store.state.imUserInfo.imId === groupAccountId){
        uni.showToast({
          title: '不能联系自己',
          icon: 'none'
        });
        return
      }else{
        this.navigateTo({url: '/pagesB/message/messageDetails?id='+groupAccountId})
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.myAftersaleDetails{
    height: 100%;
  .bgf{
    background-color: #FFF;
  }
  .bottomBtn{
    background-color: #FFF;
    position: fixed;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-left: 32rpx;
    padding-right: 32rpx;
    padding-top: 0;
    padding-bottom: 20rpx;
    padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    .btn{
      line-height: 60rpx;
      height: 60rpx;
      padding: 0 24rpx;
      border: 1px solid #DCDEE0;
      border-radius: 60rpx;
      font-size: 24rpx;
      margin-top: 20rpx;
    }
    .btn+.btn{
      margin-left: 20rpx;
    }
  }
}
</style>
